<template>
  <div class="rank-left-warp">
    <dl
      class="rank-left-item"
      v-for="(group, index) in groups"
      :key="group.groupId"
    >
      <dt class="rank-item-title" :data-index="index">
        {{ group.groupName }}
      </dt>
      <dd
        v-for="(item, index) in group.toplist"
        :key="item.topId"
        @click="handleHeightLight(index, $event)"
        :class="
          index === topListIndex && group.groupId === groupIndex ? 'active' : ''
        "
      >
        {{ item.title }}
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: "RankingList",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { useRankingStore } from "@/store/modules/ranking.js";
const rankingStore = useRankingStore();
let topListIndex = ref(0);
let groupIndex = ref(0);
// 内容写死的数据
const groups = [
  {
    groupId: 0,
    groupName: "巅峰榜",
    toplist: [
      {
        topId: 62,
        title: "飙升榜",
        intro: "QQ音乐站内播放热度飙升最快的前100首歌曲，每日更新。",
        updateTime: "2022-11-13",
        id: 19723756,
      },
      {
        topId: 26,
        title: "热歌榜",
        intro: "QQ音乐站内播放热度前300首歌曲，每日更新。",
        updateTime: "2022-11-13",
        id: 3778678,
      },
      {
        topId: 27,
        title: "新歌榜",
        intro: "QQ音乐站内播放热度排名前100首新歌，每日更新。",
        updateTime: "2022-11-13",
        id: 3779629,
      },
      {
        topId: 4,
        title: "流行指数榜",
        intro: "QQ音乐站内播放相对涨幅排名前100首歌曲，每日更新。",
        updateTime: "2022-11-13",
      },
      {
        topId: 57,
        title: "喜力电音榜",
        intro: "QQ音乐播放热度最高的电音歌曲TOP50，每周更新。",
        updateTime: "2022-11-10",
        id: 1978921795,
      },
      {
        topId: 52,
        title: "腾讯音乐人原创榜",
        intro: "QQ音乐最新最热的腾讯音乐人原创作品TOP100。",
        updateTime: "2022-11-13",
        id: 2884035,
      },
      {
        topId: 67,
        title: "听歌识曲榜",
        intro:
          "QQ音乐用户使用“听歌识曲”功能捕捉热度最高的歌曲TOP100，每日更新。",
        updateTime: "2022-11-13",
        id: 6688069460,
      },
      {
        topId: 201,
        title: "MV榜",
        intro: "QQ音乐播放得分最高的官方MV TOP排行榜，发行期90天内。",
        updateTime: "",
      },
    ],
  },
  {
    groupId: 1,
    groupName: "地区榜",
    toplist: [
      {
        topId: 5,
        title: "内地榜",
        intro: "QQ音乐每周播放热度最高的内地歌曲TOP100，发行期为90天内。",
        updateTime: "2022-11-10",
      },
      {
        topId: 59,
        title: "香港地区榜",
        intro:
          "QQ音乐每周播放热度最高的中国香港地区歌曲TOP100，发行期为180天内。",
        updateTime: "2022-11-10",
      },
      {
        topId: 61,
        title: "台湾地区榜",
        intro:
          "QQ音乐每周播放热度最高的中国台湾地区歌曲TOP100，发行期为90天内。",
        updateTime: "2022-11-10",
      },
      {
        topId: 3,
        title: "欧美榜",
        intro: "QQ音乐每周播放热度最高的欧美地区歌曲TOP 100，发行期为30天内。",
        updateTime: "2022-11-10",
        id: 2809513713,
      },
      {
        topId: 16,
        title: "韩国榜",
        intro: "QQ音乐每周播放热度最高的韩国地区歌曲TOP 100，发行期为90天内。",
        updateTime: "2022-11-10",
        id: 745956260,
      },
      {
        topId: 17,
        title: "日本榜",
        intro: "QQ音乐每周播放热度最高的日本地区歌曲TOP 100，发行期为180天内。",
        updateTime: "2022-11-10",
        id: 5059644681,
      },
    ],
  },
  {
    groupId: 2,
    groupName: "特色榜",
    toplist: [
      {
        topId: 28,
        title: "网络歌曲榜",
        intro: "QQ音乐播放热度最高网络歌曲TOP 100，每周更新。",
        updateTime: "2022-11-10",
        ID: 6723173524,
      },
      {
        topId: 63,
        title: "DJ舞曲榜",
        intro: "QQ音乐播放热度最高的DJ舞曲TOP 100，每周更新。",
        updateTime: "2022-11-10",
        id: 6886768100,
      },
      {
        topId: 60,
        title: "抖快榜",
        intro: "当下最流行的短视频热歌TOP 100，每周更新。",
        updateTime: "2022-11-10",
      },
      {
        topId: 64,
        title: "综艺新歌榜",
        intro: "QQ音乐每周播放热度最高的综艺歌曲TOP 100，发行期为180天内。",
        updateTime: "2022-11-10",
      },
      {
        topId: 29,
        title: "影视金曲榜",
        intro: "QQ音乐每周播放热度最高的影视歌曲TOP 100，发行期90天内。",
        updateTime: "2022-11-10",
      },
      {
        topId: 65,
        title: "国风热歌榜",
        intro: "QQ音乐每周播放热度最高的国风歌曲TOP 100，发行期90天内。",
        updateTime: "2022-11-10",
        id: 5059642708,
      },
      {
        topId: 58,
        title: "说唱榜",
        intro: "QQ音乐每周播放热度最高的中文说唱歌曲TOP 100，发行期180天内。",
        updateTime: "2022-11-10",
        id: 991319590,
      },
      {
        topId: 72,
        title: "动漫音乐榜",
        intro: "QQ音乐每周播放热度最高的动漫音乐TOP 100。",
        updateTime: "2022-11-10",
      },
      {
        topId: 73,
        title: "游戏音乐榜",
        intro: "QQ音乐每周播放热度最高的游戏音乐TOP 100。",
        updateTime: "2022-11-10",
      },
      {
        topId: 70,
        title: "达人音乐榜",
        intro: "QQ音乐最热门的翻唱作品TOP 100，每周更新。",
        updateTime: "2022-11-10",
      },
      {
        topId: 36,
        title: "K歌金曲榜",
        intro: "全民K歌中最热门的50首点唱作品，每周更新。",
        updateTime: "2022-11-10",
        id: 21845217,
      },
    ],
  },
  {
    groupId: 3,
    groupName: "全球榜",
    toplist: [
      {
        topId: 108,
        title: "美国公告牌榜",
        intro:
          "Billboard 公告牌Hot 100榜单集结了当下在美国最流行的全风格歌曲，以周为单位计算，根据流媒体播放量，电台播放影响力及线上单曲订购等数据综合而成，经过数十年的改善，如今Billboard榜单已成为音乐界最著名的榜单。",
        updateTime: "2022-11-09",
        id: 60198,
      },
      {
        topId: 129,
        title: "韩国Melon榜",
        intro: "韩国Melon周榜，每周一更新。",
        updateTime: "2022-11-07",
      },
      {
        topId: 107,
        title: "英国UK榜",
        intro:
          "英国单曲排行榜（UK Singles Chart），是代表英国唱片工业的权威排行榜。排行榜的资讯会刊登在音乐周刊（Music Week）（前75名）、排行榜+（ChartsPlus）（前200名）等杂志上，并公布在各大网站上（通常只列出前40名）。由约6500家唱片零售商和英国网路影音下载业者负责提供销售资料。",
        updateTime: "2022-11-07",
      },
      {
        topId: 105,
        title: "日本公信榜",
        intro:
          "日本公信榜，也称为Oricon榜，是由1968年1月4日正式开始的日本最具知名度的音乐排行榜。不论歌曲是以单曲发行，还是被收录在专辑之中，数字单曲榜根据单首歌曲的下载数量计算而成，每周三更新。",
        updateTime: "2022-11-09",
      },
      {
        topId: 126,
        title: "JOOX本地热播榜",
        intro: "JOOX本地热播榜，每周四更新。",
        updateTime: "2022-11-11",
      },
      {
        topId: 130,
        title: "香港TVB劲歌金榜",
        intro:
          "“劲歌金榜”是香港TVB专业流行音乐节目《劲歌金曲》中所介绍的榜单，是香港乐坛重要的流行指标之一。每周更新。",
        updateTime: "2022-11-07",
      },
      {
        topId: 127,
        title: "台湾KKBOX榜",
        intro: "台湾KKBOX华语新歌周榜，每周五更新。",
        updateTime: "2022-11-11",
      },
      {
        topId: 128,
        title: "YouTube音乐排行榜",
        intro:
          "YouTube是一个视频网站，YouTube热门音乐榜是根据歌曲每周在YouTube播放次数进行排名，每周一更新。",
        updateTime: "2022-11-07",
      },
    ],
  },
];

// 点击高亮回调
const handleHeightLight = (index, $event) => {
  const gIndex =
    $event.target.parentNode.firstChild.getAttribute("data-index") * 1;
  if (groupIndex.value === gIndex) {
    topListIndex.value = index;
  } else {
    groupIndex.value = gIndex;
    topListIndex.value = index;
  }
  rankingStore.$patch({
    name: groups[groupIndex.value].toplist[topListIndex.value].title,
    time: groups[groupIndex.value].toplist[topListIndex.value].updateTime,
    id: groups[groupIndex.value].toplist[topListIndex.value].id || 0,
    intro: groups[groupIndex.value].toplist[topListIndex.value].intro,
  });
};

onMounted(() => {
  rankingStore.$patch({
    name: groups[groupIndex.value].toplist[topListIndex.value].title,
    time: groups[groupIndex.value].toplist[topListIndex.value].updateTime,
    id: groups[groupIndex.value].toplist[topListIndex.value].id || 0,
    intro: groups[groupIndex.value].toplist[topListIndex.value].intro,
  });
});
</script>

<style scoped lang="less">
.rank-left-warp {
  border: 1px solid #e7e7e7;
  text-align: center;
  width: 180px;
  height: 1650px;
  .rank-left-item {
    margin: 5px 0;
    width: 180px;
    .rank-item-title {
      margin: 0 15px 10px;
      line-height: 56px;
      text-align: left;
      font-size: 20px;
      border-bottom: 1px solid #e7e7e7;
      font-weight: 400;
    }
    dd {
      text-align: left;
      line-height: 40px;
      height: 40px;
      padding-left: 15px;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        color: #31c27c !important ;
      }
    }
    .active {
      color: #fff;
      pointer-events: none;
      background-color: #31c27c;
    }
  }
}
</style>
